<template>
	<view class="examload">
	  <view class="examSub"><view @click="setExam"><my-icon name="fabukaoshi1"></my-icon><text>发布</text></view></view>
		<view class="examTop"><view class="examTit">发布考试流程</view><view class="examNode">仅需5步，即可轻松创建</view></view>
		<view class="examList">
			<!-- <view class="fl"><text class="examNo">1</text><text class="examtxt">设置时间</text></view> -->
			<view class="fl">
				<view class="examNo line1">
					<image src="../../static/exam/1.png" mode="aspectFit"></image>
				</view>
				<text class="examtxt">设置时间</text>
			</view>
			<view class="fr">
				<view class="examNo line2">
					<image src="../../static/exam/2.png" mode="aspectFit"></image>
				</view>
				<text class="examtxt">选择试卷</text>
			</view>
			<view class="fl">
				<view class="examNo line3">
					<image src="../../static/exam/3.png" mode="aspectFit"></image>
				</view>
				<text class="examtxt">设置模式</text>
			</view>
			<view class="fr">
				<view class="examNo line4">
					<image src="../../static/exam/4.png" mode="aspectFit"></image>
				</view>
				<text class="examtxt">选择学生</text>
			</view>
			<view class="fl">
				<view class="examNo line5">
					<image src="../../static/exam/5.png" mode="aspectFit"></image>
				</view>
				<text class="examtxt">发布考试</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 发布
			setExam(){
				uni.navigateTo({
					url:'./examSetTime'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.examload{ height: 100%; overflow: hidden;}
	.examSub{
		display: flex;
		justify-content:flex-end;
		padding-right: 30upx;
		margin-top: 55upx;
		view{
			color: #3E7DF1;
			display: flex;
			justify-content:flex-end;
			align-items: center;
			height: 100upx;
			line-height: 100upx;
			.iconfont{
				font-size: 35upx;
				margin-right: 12upx;
			}
		}
	}
	.examTop{
		text-align: center;
		margin-bottom: 74upx;
		.examTit{font-size: 38upx;color: #363940;font-weight: 500;}
		.examNode{font-size: 30upx;color: #6B7180; margin-top: 15upx; font-weight: 400;}
	}
	.examList{
		width: 541upx;
		margin: 0 auto;
		view{
			width: 350upx;
			height: 120upx;
			border-radius: 120upx;
			background: #ffffff;
			box-shadow: 0upx 8upx 32upx 0upx rgba(55,75,149,0.1); 
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20upx 0;
			.examNo{
				width:70upx; 
				height:70upx; 
				margin-right: 30upx; 
				font-size:37upx; 
				font-weight: 400; 
				line-height: 70upx;
				text-align: center; 
				border-radius:70upx;
				background:rgba(90,123,239,.2); 
				color:#5A7BEF;
				image{
					width: 14px;
					height: 25px;
				}
				}
	    .examtxt{color:#4B4F59;font-size: 32upx;font-weight: 500;}
			.line2{ color:#72C65F;background: rgba(115,198,96,.2);}
			.line3{ color:#FEA02E;background: rgba(254,160,46,.2);}
			.line4{ color:#B471ED;background: rgba(180,113,237,.2);}
			.line5{ color:#F87263;background: rgba(248,114,99,.2);}
		}
	}
</style>
